<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后台管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/backstage/css/font.css">
    <link rel="stylesheet" href="/backstage/css/xadmin.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"></script>
    <style>
        .layui-col-xs2 {
            width: 25%
        }

        .layui-col-xs2 h3 {
            font-weight: bold;
            font-size: 15px;
        }

        .data-box {
            border: 1px solid #ccc;
            width: 48%;
        }

        .data-left {
            float: left
        }

        .data-right {
            float: right
        }

        .data-box h3 {
            padding: 5px 10px;
            background: #f3f3f3;
            border-bottom: 1px solid #ccc
        }

        .data-box li {
            display: inline-block;
            width: 24%;
            text-align: center;
            margin: 20px 0;
        }

        .data-box li h1 {
            color: #f04844
        }

        .layui-icon {
            font-size: 60px;
            color: #1abc9c;
            /*display: block;*/
            float: left;
            position: relative;
            top: 20px;
            margin-right: 5px;
            width: 80px;
            text-align: center;
        }

        cite {
            color: #3c3f41 !important;
            font-size: 26px !important;
        }

        .f-r{
            float:left;
        }
    </style>
</head>
<body>
<!--<div style="margin:200px auto;text-align: center;font-size:30px;">欢迎回来</div>-->
<div class="x-body layui-anim layui-anim-up">
    <!--<blockquote class="layui-elem-quote">欢迎管理员：-->
    <!--<span class="x-red">test</span>！当前时间:2018-04-25 20:50:53</blockquote>-->
    <fieldset class="layui-elem-field">
        <legend>今日统计</legend>
        <!--<div class="layui-field-box">-->
        <!--<div class="layui-col-md12">-->
        <!--<div class="layui-card">-->
        <div class="layui-card-body">
            <div class="layui-carousel x-admin-carousel x-admin-backlog" lay-anim="" lay-indicator="inside"
                 lay-arrow="none" style="width: 100%; height: auto;">
                <!--<div carousel-item="">-->
                <ul class="layui-row layui-col-space10 layui-this">
                    <li class="layui-col-xs2">
                        <a href="javascript:;" class="x-admin-backlog-body">
                            <i class="layui-icon layui-icon-username"></i>

                            <div class="f-r">
                                <h3>今日用户</h3>
                                <p>
                                    <cite>{$today.insert_user}</cite>
                                </p>
                            </div>
                            <p style="clear: both">

                            </p>

                        </a>
                    </li>
                    <li class="layui-col-xs2">
                        <a href="javascript:;" class="x-admin-backlog-body">
                            <i class="layui-icon layui-icon-friends">&#xe612;</i>

                            <div class="f-r">
                                <h3>今日会员</h3>
                                <p>
                                    <cite>{$today.insert_vip}</cite></p>
                            </div>
                            <p style="clear: both"></p>
                        </a>
                    </li>


                    <li class="layui-col-xs2">
                        <a href="javascript:;" class="x-admin-backlog-body">
                            <i class="layui-icon layui-icon-rmb"></i>

                            <div class="f-r">
                                <h3>今日收益</h3>
                                <p>
                                    <cite>{$today.earnings}</cite></p>
                            </div>
                            <p style="clear: both"></p>
                        </a>
                    </li>
                    <li class="layui-col-xs2">
                        <a href="javascript:;" class="x-admin-backlog-body">
                            <i class="layui-icon layui-icon-rmb"></i>

                            <div class="f-r">
                                <h3>今日利润</h3>
                                <p>
                                    <cite>{$today.profit}</cite></p>
                            </div>
                            <p style="clear: both"></p>
                        </a>
                    </li>

                </ul>
            </div>
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
        </div>

    </fieldset>
    <fieldset class="layui-elem-field">
        <legend>所有统计</legend>
        <!--<div class="layui-field-box">-->
        <!--<div class="layui-col-md12">-->
        <!--<div class="layui-card">-->
        <div class="layui-card-body">
            <div class="layui-carousel x-admin-carousel x-admin-backlog" lay-anim="" lay-indicator="inside"
                 lay-arrow="none" style="width: 100%; height: auto;">
                <!--<div carousel-item="">-->
                <ul class="layui-row layui-col-space10 layui-this">
                    <li class="layui-col-xs2">
                        <a href="javascript:;" class="x-admin-backlog-body">
                            <i class="layui-icon layui-icon-user"></i>

                            <div class="f-r">
                                <h3>总用户</h3>
                                <p>
                                    <cite>{$total.insert_user}</cite></p>
                            </div>
                            <p style="clear: both"></p>
                        </a>
                    </li>
                    <li class="layui-col-xs2">
                        <a href="javascript:;" class="x-admin-backlog-body">
                            <i class="layui-icon ">&#xe613;</i>

                            <div class="f-r">
                                <h3>总会员</h3>
                                <p>
                                    <cite>{$total.insert_vip}</cite></p>
                            </div>
                            <p style="clear: both"></p>
                        </a>
                    </li>


                    <li class="layui-col-xs2">
                        <a href="javascript:;" class="x-admin-backlog-body">
                            <i class="layui-icon layui-icon-rmb"></i>

                            <div class="f-r">
                                <h3>总收益</h3>
                                <p>
                                    <cite>{$total.earnings}</cite></p>
                            </div>
                            <p style="clear: both"></p>
                        </a>
                    </li>

                    <li class="layui-col-xs2">
                        <a href="javascript:;" class="x-admin-backlog-body">
                            <i class="layui-icon layui-icon-rmb"></i>

                            <div class="f-r">
                                <h3>总利润</h3>
                                <p>
                                    <cite>{$total.profit}</cite></p>
                            </div>
                            <p style="clear: both"></p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </fieldset>
    <div>
        <div class="data-box data-left">
            <h3>收益总览</h3>
            <ul>
                <li>
                    <h1>{$earnings.today_vip}</h1>
                    <p>今日会员充值</p>
                </li>
                <li>
                    <h1>{$earnings.today_lesson}</h1>
                    <p>今日渠道会员充值</p>
                </li>

                <li>
                    <h1>{$earnings.today_vip}</h1>
                    <p>总会员充值</p>
                </li>
                <li>
                    <h1>{$earnings.total_lesson}</h1>
                    <p>总渠道会员充值</p>
                </li>
            </ul>
        </div>
        <div class="data-box data-right">
            <h3>用户总览</h3>
            <ul>
                <li>
                    <h1>{$user.today}</h1>
                    <p>今日新增</p>
                </li>
                <li>
                    <h1>{$user.yesterday}</h1>
                    <p>昨日新增</p>
                </li>
                <li>
                    <h1>{$user.month}</h1>
                    <p>本月新增</p>
                </li>
                <li>
                    <h1>{$user.total}</h1>
                    <p>会员总数</p>
                </li>
            </ul>
        </div>

        <p style="clear: both"></p>

    </div>

    <div class="data-box" style="margin-top:30px;width:100%;">
        <h3>充值统计</h3>

        <div id="order" style="width: 100%;height:400px;"></div>

    </div>

    <div class="data-box" style="margin-top:30px;width:100%;">
        <h3>用户统计</h3>

        <div id="user" style="width: 100%;height:400px;"></div>

    </div>
</div>


</body>
<script src="/js/jquery.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    //    var myChart = echarts.init(document.getElementById('main'));
    //
    //    // 指定图表的配置项和数据
    //    var option = {
    //        xAxis: {
    //            type: 'category',
    //            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    //        },
    //        yAxis: {
    //            type: 'value'
    //        },
    //        series: [{
    //            data: [820, 932, 901, 934, 1290, 1330, 1320],
    //            type: 'line',
    //            smooth: true
    //        }]
    //    };


    $.get('{:url("chart")}','',function(res){

        console.log(res);

        setLine('order',res.orderData.title,res.orderData.data,'金额');

        setLine('user',res.userData.title,res.userData.data,'用户');

    },'json')


    function setLine(id,title,data,name) {

//        console.log(id,title,data,name);return;
        //折线图
        var line = echarts.init(document.getElementById(id));
        line.setOption({
            color: ["#32d2c9"],
            title: {
                x: 'left',
//            text: '成绩统计',
                textStyle: {
                    fontSize: '18',
                    color: '#4c4c4c',
                    fontWeight: 'bolder'
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: false,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data:title,
                axisLabel: {
                    interval: 0
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: name,
                    type: 'line',
                    data: data,
                    markLine: {data: [{type: 'average', name: '平均值'}]}
//                    smooth: true
                }
            ]
        });

        // 使用刚指定的配置项和数据显示图表。
//        line.setOption(option);

    }

</script>
</html>